<template>
  <div>
    <h2>用户中心信息</h2>
    <div v-if="loading">加载中...</div>
    <div v-else>
      <!-- 显示原始数据以便调试 -->
      <div v-if="rawData">
        <h3>原始数据</h3>
        <pre>{{ JSON.stringify(rawData, null, 2) }}</pre>
      </div>
      
      <!-- 根据实际数据结构判断用户类型 -->
      <div v-if="userInfo">
        <div v-if="userInfo.role === 'merchant'">
          <h3>商家信息</h3>
          <p>欢迎，商家用户！</p>
          <p>用户ID: {{ userInfo.userId }}</p>
          <p>角色: {{ userInfo.role }}</p>
        </div>
        
        <div v-else-if="userInfo.role === 'employee'">
          <h3>员工信息</h3>
          <p>欢迎，员工用户！</p>
          <p>用户ID: {{ userInfo.userId }}</p>
          <p>角色: {{ userInfo.role }}</p>
        </div>
        
        <div v-else>
          <h3>无权限访问</h3>
          <p>您没有权限访问此页面。</p>
          <p>用户ID: {{ userInfo.userId }}</p>
          <p>角色: {{ userInfo.role || '未分配角色' }}</p>
        </div>
      </div>
      
      <div v-else>
        <p>未能获取到用户信息</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserId } from '@/api/manage/center'
export default {
  name: 'Center',
  data() {
    return {
      rawData: null,
      userInfo: null,
      loading: true
    }
  },
  mounted() {
    this.fetchUserId()
  },
  methods: {
    async fetchUserId() {
      try {
        this.loading = true
        const response = await getUserId()
        
        // 保存原始数据
        this.rawData = response
        
        // 打印从后端获取的数据
        console.log('获取到的原始数据:', response)
        
        // 根据实际返回结构提取用户信息
        // 先尝试几种常见的数据结构
        if (response.data) {
          this.userInfo = response.data
        } else if (response.rows) {
          this.userInfo = response.rows[0] || response.rows
        } else {
          this.userInfo = response
        }
        
        // 如果 userInfo 是数组，取第一个元素
        if (Array.isArray(this.userInfo)) {
          this.userInfo = this.userInfo[0]
        }
        
        console.log('处理后的用户信息:', this.userInfo)
      } catch (error) {
        console.error('获取用户信息失败:', error)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
pre {
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
  text-align: left;
}
</style>